<template>
  <div class="welcome-wrap">
    <header class="title">
      <el-button class="r pan-btn green-btn sm-btn"
                 size="small"
                 icon="el-icon-refresh"
                 @click="refresh()"></el-button>
    </header>
    <div class="container">
      <el-form label-width="120px"
               :model="searchForm"
               class="search-form">
        <el-form-item v-for="(item, index) in labelList"
                      :label="item[0]"
                      :key='index'>
          <el-checkbox-group v-model="labelArr[index].array"
                             size="medium">
            <el-checkbox-button @change="labelChange"
                                v-for="(labelItem, labelIndex) in item[2]"
                                :label="labelItem.id"
                                :name="item[1]"
                                :key="labelIndex">{{ labelItem.label }}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="img-con">
        <ul>
          <li v-for="item in templateArr">
            <figure @click="renderTemplateFlag(item.id)">
              <div ref='tag'
                   class="tags-view-item">
                <img :src="'/activityConsole/staticResources/'+item.image"
                     alt="">
              </div>
              <figcaption>
                <a :href="item.url">{{ item.remarks }}</a>
                <p>{{ item.name }}</p>
              </figcaption>
            </figure>
          </li>
        </ul>
      </div>
    </div>
    <footer>
      <el-pagination @current-change="handleCurrentChange"
                     :page-size="limit"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </footer>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'TemplateIndex',
  data() {
    return {
      total: 0,
      limit: 10,
      currentPage: 1,
      labelArr: [
        {
          name: 'science',
          array: []
        },
        {
          name: 'from',
          array: []
        },
        {
          name: 'theme',
          array: []
        },
        {
          name: 'type',
          array: []
        }
      ],
      templateArr: [],
      searchForm: {
        scienceLabelIds: '',
        fromLabelIds: '',
        themeLabelIds: '',
        typeLabelIds: '',
        pageIndex: 1,
        pageNum: 10
      },
      labelList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.getLabel()
      this.getTemplate()
    })
  },
  methods: {
    getLabel() {
      const _this = this
      request.get('/activityConsole/activity/template/show/activity-label', {
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then(res => {
        _this.labelList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    getTemplate() {
      const _this = this
      _this.searchForm.pageIndex = _this.currentPage
      const params = _this.searchForm
      request({
        url: '/activityConsole/activity/template/show/activity-template-list',
        method: 'get',
        params: params
      }).then(res => {
        _this.templateArr = res.data
        console.log(_this.templateArr)
      }).catch(err => {
        console.log(err)
      })
    },
    refresh() {
      this.$router.go(0)
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val)
    },
    renderIds(arr) {
      this.searchForm.scienceLabelIds = arr[0].array.join(',')
      this.searchForm.fromLabelIds = arr[1].array.join(',')
      this.searchForm.themeLabelIds = arr[2].array.join(',')
      this.searchForm.typeLabelIds = arr[3].array.join(',')
    },
    labelChange() {
      this.renderIds(this.labelArr)
      this.getTemplate()
    },
    renderTemplateFlag(id) {
      const _this = this
      request({
        url: '/activityConsole/activity/template/info/id/' + id + '/type',
        method: 'get'
      }).then(res => {
        console.log(res)
        _this.$router.push({ path: '/template-edit/TemplateEdit?type=' + res + '&templateId=' + id })
      }).catch(err => {

      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.welcome-wrap {
}
footer {
  margin: 20px 0;
  text-align: center;
}

.search-form {
  margin: 20px 0;
}

.search-form ul {
  overflow: hidden;
  margin: 0;
}

.search-form ul li {
  float: left;
  margin: 0 10px;
}

.search-form ul li .el-input {
  display: none;
}

.img-con {
  width: 80%;
  margin: 0 auto;
}

.img-con ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.img-con ul li {
  flex: 0 1 auto;
   -webkit-flex: 0 1 auto;
   -o-flex: 0 1 auto;
   -moz-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
  flex-basis: 30%;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 0 0 5%;
}

.img-con ul li:nth-child(3n - 1) {
  margin: 0 5% 5%;
}

.img-con ul li:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.img-con figcaption {
  margin-top: 15px;
  line-height: 2;
}

.img-con a,
.img-con img {
  display: block;
  width: 100%;
}
</style>
